import React from 'react'
import './PlayerList.css'
import {ICON_URL_PREFIX} from "../../redux/game";
import constants from "../../utils/constants";
import TeamIconTitle from "./TeamIconTitle/TeamIconTitle";

const PlayerList = props => {


    const {
        team,
        list,
        tableHeadData,
    } = props

    // const iconTemplate = (
    //     <div className='flex-center-align-center'>
    //         <img
    //             src={`${ICON_URL_PREFIX}/${team.logo}`}
    //             alt=''
    //             style={{width: '20px', marginRight: '6px',}}
    //         />
    //         <p>{team.name_zh}</p>
    //     </div>
    // )
    const iconTemplate = <TeamIconTitle team={team} />


    const tableHead = tableHeadData ? <div className='flex-space-between-align-center' style={{padding: '4px',}}>
        <div className='player-list-table-first-col'>
            <span className='appendix-text'>{tableHeadData[0]}</span>
        </div>
        <div className='player-list-table-second-col'>
            <span className='appendix-text'>{tableHeadData[1]}</span>
        </div>
        <div className='player-list-table-third-col'>
            <span className='appendix-text'>{tableHeadData[2]}</span>
        </div>
    </div> : null

    let listTemplate = props.tableBodyRender(list)

    // if (list && list.length === 0) {
    //     listTemplate = <div style={{textAlign: 'center', padding: 4,}}><p>暂无数据</p></div>
    // } else {
    //     listTemplate = list?.map(player => {
    //
    //         const {
    //             id,
    //             name,
    //             position,
    //             logo,
    //             reason,
    //         } = player
    //
    //         return <div
    //             key={id}
    //             className='flex-space-between-align-center player-list-table-row'
    //         >
    //             <div className='flex-align-center player-list-table-first-col'>
    //                 <div style={{width: '24px', height: '24px', marginRight: '8px',}}>
    //                     <img alt='' src={constants.player_icon_prefix + logo} style={{height: '24px',}}/>
    //                 </div>
    //                 <span>{name}</span>
    //             </div>
    //             <div className='player-list-table-second-col'>
    //                 <span>{position}</span>
    //             </div>
    //             <div className='player-list-table-third-col'>
    //                 <span>{reason}</span>
    //             </div>
    //         </div>
    //
    //     })
    // }

    return <div style={{background: '#fff', padding: '12px 8px',}}>
        {iconTemplate}
        <div
            className='player-list-table'
        >
            {tableHead}
            {listTemplate}
        </div>

    </div>
}

export default PlayerList
